import React from "react"
import fanhui from "../../imgs/返回.png"
import del from "../../imgs/叉.png"
import geren from "../../imgs/个人中心 我的  人物 标准头 线性 copy.png"
import {SerachHot,SerachSong,SerachUrl,Single,SingleSame} from "../../api/index"
import {withRouter} from "react-router-dom"
@withRouter
class ss extends React.Component{
    constructor(){
        super();
        this.state={
            val:[],
            cang1:"none",
            sing:""
        }
    }
    componentDidMount(){
        SerachHot().then(res=>{
            // console.log(res)
            const arr=res;
         this.setState({
             val:arr
         })
        })
        localStorage.setItem("song_info","[]")
    }
    componentWillMount(){
        localStorage.setItem("song_info",JSON.stringify({"song":""}))
    }

    change(e){
        // console.log(e.target.value);
        let song1=e.target.value
        this.setState({
            sing:song1
        })
        if(song1==""){
            this.setState({
                cang1:"none"
            })
        }else{
            this.setState({
            cang1:"block"
        })
        }   
        SerachSong(song1)
            .then(res => {
                const c=res.result
                    if(c==undefined){
                    }else{
                        const b=res.result;
                        // console.log(b)
                        // console.log(b.songs)
                        localStorage.setItem("song_info",JSON.stringify(b))
                        this.setState({                                                        
                        })   
                    }   
                })
    }
    fang(name,id){
        // console.log(name)
        // SingleSame(name).then(res=>{
        //     console.log(res)
        // // })
        // console.log(name)
        // console.log(id)
        SerachUrl(id).then(res=>
            {
                // console.log(res)
            // console.log(res.data[0])
            // console.log(this.props)
            let b=res.data[0].url          
            localStorage.setItem("fang_info",JSON.stringify({"a":b,"name":name}))
            // this.props.history.push(`/list/detail/song?id=${id}&&name=${name}`)
            this.props.history.push("/ss/fang")
            }
            )
    }
    fanhui(){
        let {go}=this.props.history
        go(-1)
    }
    del(){
        this.setState({
            sing:"",
            cang1:"none"
        })
    }
    geren(){
        Single().then(res=>{
            // console.log(res.artists)
        })
        let  {history}=this.props;
        history.push("/ss/geren")
    }
    render(){
        localStorage.getItem("song_info")?localStorage.getItem("song_info"):localStorage.setItem("song_info","[]")
        const song=JSON.parse(localStorage.getItem("song_info")).songs?JSON.parse(localStorage.getItem("song_info")).songs:""
        // console.log(song)
        return(
            <div className="sousuo">
                <div className="sousuo1">
                <img src={fanhui} className="fanhui" onClick={this.fanhui.bind(this)}/>
                <input type="text" onChange={this.change.bind(this)}  className="ss_box" value={this.state.sing}/>
                <img src={del} className="del" onClick={this.del.bind(this)}/> 
                <img src={geren} className="geren" onClick={this.geren.bind(this)}/>  
                </div>
                  <hr/>
                  <span className="history">历史纪录</span>
                  <div className="history1">
                      <span className="history2">这就是爱情</span>
                  </div>
                  <span className="history">热搜榜</span>
                  <ul>
                      { 
                      this.state.val.map((item,index)=>{
                          return(   
                              <li key={index} className="re" >
                                  <span >{index+1}</span>
                                  &nbsp;&nbsp;&nbsp;
                                  {item.first}</li> 
                          )
                      })
                      }
                  </ul>
                  <ul className="sstge" style={{display:this.state.cang1}}>
                  
                  { 
                    (JSON.parse(localStorage.getItem("song_info")).songs==undefined?"":JSON.parse(localStorage.getItem("song_info")).songs)==""? <li className="sst_gg">没有找到歌曲</li> : song.map((item,index)=>{
                          return(   
                              <li key={index} className="sst_gg" onClick={this.fang.bind(this,item.name,item.id)}>
                                  &nbsp;&nbsp;&nbsp;
                                  {item.name}</li> 
                          )
                      })
                      }
                  </ul>
            </div> 
        )
    }
}
export default ss